<template>
    <div class="subheadings">
        <span v-if="props.name.length<=18">{{ props.name }}</span>
        <el-tooltip :content="props.name" v-else effect="light">
            {{ props.name }}
        </el-tooltip>
    </div>
</template>
<script setup>
const props = defineProps({
  name: String,
})
</script>
<style lang='scss' scoped>
.subheadings{
    width: 450px;
    height: 105px;
    background-size: 100% 100%;
    background-image: url(/src/assets/images/common/bg_little_title.png);
    margin: 0 auto;
    color: #E4F5FF;
    font-size: 22px;
    font-family: Source Han Sans;
    font-weight: 500;
    line-height: 80px;
    text-align: left;
    box-sizing: border-box;
    padding-left: 40px;
    :deep(span){
        display: inline-block;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
</style>